<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="icon" type="image/png" href="img/favicon.ico">
	<title>Tools Collection</title>
	<link rel="stylesheet" href="../layui/css/layui.css">
	<script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="../static/file2hex.js" charset="utf-8"></script>
</head>

<body>
	<div class="layui-nav top layui-bg-green">
		<div>
			<a href="/"><img src="../static/img/logolh.png" alt="logo" style="height: 62px;"></a>
		</div>
		<div style="margin-left:50px;">
			<ul>
				<li class="layui-nav-item layui-this">
					<a href="javascript:;" style="font-size: 20px;">字体生成bin</a>
					<dl class="layui-nav-child">
						<dd><a href="/file2hex">文件转HEX</a></dd>
						<dd><a href="/delete_note">删除注释</a></dd>
						<dd><a href="/img2bin">图片转bin</a></dd>
						<dd><a href="/chart">曲线</a></dd>
						<dd><a href="/ttf2bin">字体生成bin</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item">
					<a href="javascript:;" style="font-size: 20px;">预留</a>
					<dl class="layui-nav-child">
						<dd><a href="">预留</a></dd>
						<dd><a href="">预留</a></dd>
						<dd class="layui-this"><a href="">预留</a></dd>
						<dd><a href="">预留</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item"><a href="http://git.armcloudiot.com/" style="font-size: 20px;">mygit</a></li>
				<li class="layui-nav-item"><a href="http://cloudreve.armcloudiot.com/" style="font-size: 20px;">云盘</a>
				</li>
				<li class="layui-nav-item"><a href="http://leanote.armcloudiot.com/" style="font-size: 20px;">云笔记</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="layui-col-md-offset1" style="margin-top: 50px;">
		<div class="layui-input-block">
			<textarea name="text1" placeholder="结果" class="layui-textarea"
				style="height: 400px;width: 850px;border:1px solid #0990D2;border-radius:10px;padding:10px;font-family:宋体"
				id="Content"></textarea>
		</div>
	</div>

	<div style="margin-top: 20px; margin-left: 270px;">
		<div class="layui-input-inline">
			<input type="text" class="layui-input" style="width: 300px;border:1px solid #0990D2;" id="text1"
				placeholder="需要转换的字符串" value="">
		</div>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" style="width: 80px;border:1px solid #0990D2;" id="text2"
				placeholder="字体大小" value="">
		</div>

		<div class="layui-input-inline">
			<input type="color" class="layui-input" id="foregroundColorPicker" value="#000000" style="width: 80px;">
		</div>
		<div class="layui-input-inline">
			<input type="color" class="layui-input" id="backgroundColorPicker" value="#FFFFFF" style="width: 80px;">
		</div>

		<div class="layui-input-inline">
			<button type="button" class="layui-btn" id="button1">
				<i class="layui-icon">&#xe67c;</i>上传ttf
			</button>
		</div>
		<div class="layui-input-inline">
			<button type="button" class="layui-btn" id="button2">
				生成bin
			</button>
		</div>
	</div>
</body>

<style>
	.top {
		display: flex;
		margin: auto;
	}

	/* 	.layui-nav * {
		font-size: 24px
	}
	 */
	.layui-form-checkbox[lay-skin=primary] {
		height: 25px !important;
		line-height: normal !important;
		min-width: 18px;
		min-height: 18px;
		border: none !important;
		margin-right: 0;
		padding-left: 28px;
		padding-right: 0;
		background: 0 0
	}
</style>

<script>
	var index = 0;
	var data = [];

	layui.use(['form', 'layedit', 'laydate', 'upload', 'element'], function () {
		var $ = layui.jquery,
			upload = layui.upload;

		//上传文件
		var uploadInst = upload.render({
			elem: '#button1',
			url: '/ttfPost', //改成您自己的上传接口
			accept: 'file', //允许上传的文件类型
			// exts: 'png|gif|jpg|jpeg|zip|rar',//文件扩展名 
			data: {
				ratio: function () {
					return $("#ratio").val();
				}
			},
			done: function (res) {
				//如果上传失败
				if (res.code > 0) {
					return layer.msg('上传失败');
				}
				//上传成功
				layer.msg("上传成功");
			},
			error: function () {

			}
		});

		var element = layui.element;
		//一些事件监听
		element.on('tab(demo)', function (data) {
			index = data.index
			console.log(index);
		});

		$("#button2").click(function () {
			var jsondata = {
				"str": "",
				"size": 21,
				"foregroundColor": "",
				"backgroundColor": ""
			};
			jsondata.str = $("#text1").val();
			jsondata.size = parseInt($("#text2").val(), 10);
			jsondata.foregroundColor = $("#foregroundColorPicker").val();
			jsondata.backgroundColor = $("#backgroundColorPicker").val();

			var jsonStr = JSON.stringify(jsondata);

			var jsonStr = JSON.stringify(jsondata);
			$.ajax({
				url: "/ttfSendString",
				type: "POST",
				data: jsonStr,
				dataType: "text",
				success: function (rsp) {
					$("#Content").val(rsp);
					layer.msg("生成成功");
				}
			});
		});
	});
</script>

</html>